<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link rel="icon" th:href="@{/img/asset.png}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/index.css}"
          href="../static/css/index.css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/admin/css/login.css}"
          href="../static/admin/css/login.css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/admin/css/register.css}"
          href="../static/admin/css/register.css">
    <script th:src="@{/static/admin/js/login.js} src="
    /static/admin/js/login.js"></script>
    <script th:src="@{/static/admin/js/register.js} src="
    /static/admin/js/register.js"></script>
    <title>BookReview</title>
</head>
<body>

<div class="header">
    <h1>BookReview</h1>
    <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
    <a href="#">首页</a>
    <a href="#">书籍</a>
    <a href="#">论坛</a>
    <a></a>
    <a onclick="document.getElementById('id02').style.display='block'" style="width:auto;float:right">登录</a>
    <a onclick="document.getElementById('id01').style.display='block'" style="width:auto;float:right">注册</a>
</div>

<div id="id02" class="modal1">
    <form class="modal-content animate" action="/action_page.php">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
            <img th:src="../static/img/avatar.png" src="../static/img/avatar.png" alt="Avatar" class="avatar">
        </div>

        <div class="container1">
            <label><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required>

            <label><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <button type="submit">登陆</button>
            <input type="checkbox" checked="checked"> 记住我
        </div>

        <div class="container1" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn1">
                Cancel
            </button>
        </div>
    </form>
</div>
<div id="id01" class="modal">
    <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
    <form class="modal-content animate" action="/action_page.php">
        <div class="container">
            <label><b>Email</b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
            <label><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>
            <label><b>Repeat Password</b></label>
            <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
            <input type="checkbox" checked="checked"> Remember me
            <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
            <div class="clearfix">
                <button type="button" onclick="document.getElementById('id01').style.display='none'"
                        class="cancelbtn">Cancel
                </button>
                <button type="submit" class="signupbtn">Sign Up</button>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="leftcolumn">
        <div class="card">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Dec 7, 2017</h5>
            <div class="fakeimg" style="height:200px;">Image</div>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco.</p>
        </div>
        <div class="card">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Sep 2, 2017</h5>
            <div class="fakeimg" style="height:200px;">Image</div>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco.</p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2>About Me</h2>
            <div class="fakeimg" style="height:100px;">Image</div>
            <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        </div>
        <div class="card">
            <h3>Popular Post</h3>
            <div class="fakeimg"><p>Image</p></div>
            <div class="fakeimg"><p>Image</p></div>
            <div class="fakeimg"><p>Image</p></div>
        </div>
        <div class="card">
            <h3>Follow Me</h3>
            <p>Some text..</p>
        </div>
    </div>
</div>

<div class="footer">
    <h2>学海无涯，我亦是行人！</h2>
</div>

</body>
</html>
